import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import * as OTPAuth from 'otpauth';
import Clipboard from '@react-native-community/clipboard';
import {TouchableOpacity} from 'M/UI/Libraries';
import ProgressBar from 'react-native-progress/Bar';
import Style from 'M/UI/Style';
import {globalService} from 'M/Services';

export default class CaptchaText extends Component {
  timeoutId = 0;

  constructor(props) {
    super(props);
    const {item, index} = this.props;
    const value = OTPAuth.URI.parse(item);
    const totp = new OTPAuth.TOTP(value);
    const {period} = totp;
    let captcha = totp.generate();
    let seconds = new Date().getSeconds();
    let progress = seconds > period ? seconds - period : seconds;
    this.state = {
      index,
      label: value.label,
      captcha,
      period,
      progress,
      value,
      textColor: '#0088cc',
      background: '',
    };
  }

  getOtherParams(progress) {
    if (!(progress >= 20)) {
      return {color: 'blue', opacity: 1, textColor: '#0088cc'};
    }
    setTimeout(() => {
      this.setState({opacity: 1});
    }, 450);
    return {color: 'red', textColor: 'red', opacity: 0.4};
  }

  componentDidMount() {
    this.setTimeout();
    Style.setThemeColorChange(this, {backgroundColor: 'background'});
  }

  setTimeout() {
    const ts = this;
    let {label, captcha, progress, value} = this.state;
    this.timeoutId = setTimeout(() => {
      let s = new OTPAuth.TOTP(value).generate();
      ts.setState({progress: ++progress, ...this.getOtherParams(progress)});
      if (captcha !== s) {
        let progress = 0;
        ts.setState({
          ...this.state,
          label,
          captcha: s,
          progress,
          opacity: 1,
          color: 'blue',
          textColor: '#0088cc',
        });
      }
      this.setTimeout();
    }, 1000);
  }

  componentWillUnmount() {
    clearTimeout(this.timeoutId);
  }

  onPressHandler(captcha) {
    Clipboard.setString(captcha);
    globalService.getToast().show(`${captcha},已放入粘贴板`);
  }

  render() {
    const {
      label,
      captcha,
      progress,
      color,
      opacity,
      textColor,
      period,
      backgroundColor,
    } = this.state;
    return (
      <View style={[styles.container, {backgroundColor}]}>
        <TouchableOpacity
          style={styles.view}
          onPress={this.onPressHandler.bind(this, captcha)}>
          <Text
            style={{
              ...styles.text,
              color: textColor,
              opacity,
            }}>
            {captcha}
          </Text>
          <Text
            style={{
              ...styles.textLabel,
              color: textColor,
              opacity,
            }}>
            {label}
          </Text>
          <ProgressBar
            color={color}
            style={styles.progress}
            width={360}
            progress={Math.round((progress / (period - 1)) * 100) / 100}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  progress: {},
  view: {
    flex: 1,
    height: 100,
    margin: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 36,
    letterSpacing: 3,
    color: '#0088cc',
  },
  textLabel: {
    fontSize: 18,
    color: '#0088cc',
    textAlign: 'left',
  },
});
